<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 这里写死了，修改项目名可能导致页面样式不加载-->
<base href="/webim/">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>查找</title>
<link rel="stylesheet" href="static/css/layui.css">
<link rel="stylesheet" href="static/css/layui.demo.css">
<style>
.layui-find-list li img {
    position: absolute;
    left: 15px;
    top: 8px;
    width: 36px;
    height: 36px;
    border-radius: 100%;
}
.layui-find-list li {
    position: relative;
    height: 90px;;
    padding: 5px 15px 5px 60px;
    font-size: 0;
    cursor: pointer;
}
.layui-find-list li * {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
	overflow: hidden; 
	text-overflow:ellipsis; 
	white-space: nowrap;
}
.layui-find-list li span {
    margin-top: 4px;
    max-width: 155px;
}

.layui-find-list li p {
    display: block;
    line-height: 18px;
    font-size: 12px;
    color: #999;
	overflow: hidden; 
	text-overflow:ellipsis; 
	white-space: nowrap;
}
.back{
	cursor:pointer;
}
.lay_page{position: fixed;bottom: 0;margin-left: -15px;margin-bottom: 20px;background: #fff;width: 100%;}
.layui-laypage{width: 105px;margin:0 auto;display: block}
</style>
</head>
<body>
<!--搜索框区域开始  -->
<div style="margin: 15px;">
<form class="layui-form"  >
 <div class="layui-form-item">
 
    <div class="layui-inline"  >
      <input type="text" name="title"  id="content"  placeholder="输入手机号或者昵称" autocomplete="off" class="layui-input">
 	</div>
	
<div class="layui-inline">
   <select  id="type" lay-verify=""  lay-filter="type">
   <option value="friend"  selected>好友</option>
   <option value="group" >群组</option>
   </select>     
</div>

 	<div class="layui-inline" >
      <button class="layui-btn layui-btn-normal"  id="chazhao" ><i class="layui-icon">&#xe615;</i>  查找</button>
      <button class="layui-btn layui-btn-normal"  id="qunzu" ><i class="layui-icon">&#xe608;</i>新建群组</button>
	</div>
</div>
</form>
<!-- 搜索框区域结束 -->
<!-- 搜索结果区域开始 -->
<div id="LAY_view"></div>


        <textarea title="消息模版" id="LAY_tpl" style="display:none;">
			<fieldset class="layui-elem-field layui-field-title">
			  <legend>{{ d.legend}}</legend>
			</fieldset>	
			<div class="layui-row ">
				{{# if(d.type == 'friend'){ }}
					{{#  layui.each(d.data, function(index, item){ }}
					<div class="layui-col-xs3 layui-find-list">
						<li layim-event="add"  >
							<img src="{{ item.avatar }}" >
							<span>{{item.username}}({{item.phone}})</span>
							<p> {{#  if(item.sign == null){  }}我很懒，懒得写签名{{# }else{ }}{{item.sign}} {{# } }} </p>
							<button class="layui-btn layui-btn-xs btncolor add" data-type="friend" data-approval="{{ item.avatar }}"  data-uid="{{ item.id}}" data-name="{{item.username}}"><i class="layui-icon">&#xe654;</i>加好友</button>
						</li>
					</div>
					{{#  }); }}
				{{# }else{ }}
					{{#  layui.each(d.data, function(index, item){ }}
					<div class="layui-col-xs3 layui-find-list">
						<li layim-event="add" >
							<img src="{{ item.avatar }}" >
							<span>{{item.groupname}}({{item.id}})</span>
							<p> {{#  if(item.des == null){  }}暂无群介绍{{# }else{ }}{{item.des}} {{# } }} </p>
							<button class="layui-btn layui-btn-xs btncolor add" data-type="group" data-approval="{{ item.avatar }}" data-uid="{{ item.id }}" data-name="{{item.groupname}}"><i class="layui-icon">&#xe654;</i>加群</button>
						</li>
					</div>
					{{#  }); }}
				{{# } }}
			</div>	
        </textarea>
<!-- 搜索结果区域结束 -->
<div class="lay_page" id="LAY_page" ></div>		
<!-- 分页样式
<div id="demo2" ></div> -->
</div>




<script src="static/layui.js"></script>
<script>
layui.use(['layim', 'laypage','form'], function(){
	var form = layui.form;
  var layim = layui.layim
  ,layer = layui.layer
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,laypage = layui.laypage;

  var data;
  
  function findFriends(pageNo){
	  $.ajax({
		  url:"lookup?content="+$("#content").val()+"&pageNo="+pageNo+"&type="+$("#type").val(),
		  cache:false,
		  async:false,
		  success:function(res){
			  if(res.code==0){
				  data=res.data.user;
			  }else{
				  layer.msg("查找好友失败！");
			  }		 
		  }
	  });
  }
  
 function layView(legend){
	 var html = laytpl(LAY_tpl.value).render({
		    legend:legend,
		    type:$("#type").val(),
		    data:data.list
		});
		$('#LAY_view').html(html);
		
		  //监听添加事件
		  $(".add").click(function(){
			  var add =$(this);
			  var type =add.data("type");
			  var username = add.data("name");
			  var avatar = add.data("approval");
			  var toid = add.data("uid");
			  
			  if(type=="friend"){
				  layim.add({
					  type: type//friend：申请加好友、group：申请加群
					  ,username: username //好友昵称，
					  ,avatar: avatar//头像
					  ,submit: function(group, remark, index){ 
					    $.get("addFriendGroup",{"type":type,"groupid":group,"remark":remark,"toid":toid},function(res){
					    	  layer.close(index); //关闭改面板
					    	  if(res.code==0){
					    		  layer.msg("申请已发送，等待对方同意");
					    	  }else{
					    		  layer.msg(res.msg);
					    	  }
							  
					    });
					  }
					});
			  }else{
				  layim.add({
					  type: type//friend：申请加好友、group：申请加群
					  ,groupname: username //好友昵称，
					  ,avatar: avatar//头像
					  ,submit: function(group, remark, index){ 
					    console.log(group); 
					    console.log(remark);
					    $.get("addFriendGroup",{"type":type,"groupid":group,"remark":remark,"toid":toid},function(res){    	
					    	  layer.close(index); //关闭改面板
					    	  if(res.code==0){
					    		  layer.msg("申请已发送，等待管理员同意");
					    	  }else{
					    		  layer.msg(res.msg);
					    	  }
							  
					    });
					  }
					});
			  }
			  
			  
		  });
 }
  
  $(function(){
	  findFriends(1);
	  layView("好友推荐");
  });
  
  //监听查找按钮
  $("#chazhao").click(function(){
	  findFriends(1);
		  laypage.render({
			    elem: 'LAY_page' //注意，这里的 test1 是 ID，不用加 # 号
			    ,count: data.totalRow //数据总数，从服务端得到
			    ,prev: '<i class="layui-icon">&#58970;</i>'
			    ,next: '<i class="layui-icon">&#xe65b;</i>'
			    ,layout: ['prev', 'next']
			    ,limit:data.pageSize
			    ,jump: function(obj, first){      
			    	findFriends(obj.curr);
			        layView("查找结果");
			      }
			  });
	  return false;
  });
  
  
  //监听新建群组按钮
  $("#qunzu").click(function(){
	  parent.layui.layer.open({
		  type: 2,
		  title: '新建群组',
		  closeBtn: 1, //不显示关闭按钮
		  fixed: false,
		  maxmin:true,
		  shade:0,
		  offset: 'auto',
		  area: ['370px', '410px'],
		  content: ['static/css/modules/layim/html/createGroup.html', 'no'], //iframe的url，no代表不显示滚动条
		  end: function(){ //此处用于演示
				
		  }
		});
	  return false;
  });
  
  
//监听输入框变化
  $('#content').bind(' input propertychange ',function(){
	/*   findFriends(1);
		  laypage.render({
			    elem: 'LAY_page' //注意，这里的 test1 是 ID，不用加 # 号
			    ,count: data.totalRow //数据总数，从服务端得到
			    ,prev: '<i class="layui-icon">&#58970;</i>'
			    ,next: '<i class="layui-icon">&#xe65b;</i>'
			    ,layout: ['prev', 'next']
			    ,limit:data.pageSize
			    ,jump: function(obj, first){      
			    	findFriends(obj.curr);
			        layView("查找结果");
			      }
	     }); */
  });
  
  //监听下拉框变化
  form.on('select(type)', function(data){

	});
  

 
});
</script>
</body>
</html>
